<template>
  <div style="text-align: center"><h1>低代码思想</h1>
    Json拖拽+json转换为dom，
    可视化编辑json实现前端开发
  </div>
  <br>
  <div style="display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px">
    <div>元素物料区
      <div>按钮</div>
      <div>图片</div>
      <div>输入框</div>
    </div>
    <div>预览区
      <VueDraggable ref="el" v-model="list">
        <div v-for="item in list">
          <component :src="item?.src" @click="selectDom(item)" :style=item?.style :is="item.type">{{ item.value }}
          </component>
        </div>
      </VueDraggable>
    </div>
    <div>编辑区
      <div>属性编辑区</div>
      <div v-for="(v,k) in current">
        <label>{{ styleMap[k] }}</label>
        <input v-model="current[k]">
      </div>
      <div>样式编辑区</div>
      <div v-for="(v,k) in current.style">
        <label>{{ styleMap[k] }}</label>
        <input v-model="current.style[k]">
      </div>
      <div>事件编辑区</div>
    </div>
  </div>
  <!--可视化前端编辑区  -->


</template>

<script setup lang="ts">
import {ref} from 'vue'
import {VueDraggable} from 'vue-draggable-plus'

let current = ref({})
let styleMap={
  color:'颜色',
  border:'边框',
  value:'值',
  style:'样式',
  type:'类型',
  src:'图片'
}
const list = ref([
  {
    type: 'div',
    value: '你好我是div',
    style: {color: 'red', border: '1px solid #ff0000'},
    children: []
  },
  {
    type: 'input',
    value: '输入框',
    style: {color: 'blue', border: '1px solid blue'},
    children: []
  },
  {
    type: 'button',
    value: '按钮3',
    style: {color: 'green', border: '1px solid green'},
    children: []
  },
  {
    type: 'img',
    value: '图片',
    src: '',
    style: {color: 'yellow', border: '1px solid green'},
    children: []
  },
])

//点击元素，选择元素
function selectDom(dom) {
  console.log(dom)
  current.value = dom
}
</script>